<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="info"/>
			<button @click="add()">增加</button><br />
			<button @click="query()">查询</button><br />
			<table border="1">
				<thead>
					<tr>
						<th>序号</th>
						<th>内容</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(item,index) in list">
						<td>{{index + 1}}</td>
						<td>{{item.stuname}}</td>
						<td><button @click="remove(index)">删除</button></td>
					</tr>
				</tbody>
			</table>
			<span v-if="list.length == 0">暂时没有数据</span>
		</div>
		<script src="js/vue.js"></script>
		<script src="js/axios.js"></script>
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					info:"",
					list:[]
				},
				methods:{
					add: function(){
						if(!this.info){
							alert("请输入数据！");
							return;
						}
						this.list.push(this.info);
						this.info="";
						console.log(this.list);
					},
					remove: function(index){
						this.list.splice(index,1);
					},
					query: function(){
						//参数1：url；参数2：json request body中
						axios.post("http://localhost:8000/bracelet/api/bstudent/getstudentpagerlist",
									{
										"pageNum": 1,
										"pageSize":5
									})
							 .then(res => {
								//console.log(res.data);
								this.list = res.data.result.list;
							 })//请求正常返回回调 response 200
							 .catch();状态码不是200，回调
					}
				}
			});
		</script>
	</body>
</html>
